<!--
* @author wn
* @date 2023/03/09 15:20:45
* @description: 右侧头部 Tags
!-->
<template>
	<div class="global-tags">
		<!--
			@mouseenter="hoverHandle(true, index)"
			@mouseleave="hoverHandle(false, index)"
		:closable="closable && index === hoverIndex" -->
		<a-tag
			v-for="(tag, index) in tags"
			:key="tag.path"
			:closable="tag.path !== '/dashboard/analysis'"
			:class="{ active: $route.path === tag.path }"
			@click="clickHandle(tag)"
			@close="closeHandle(tag, index)"
		>
			{{ tag.title }}
		</a-tag>
	</div>
</template>
<script setup>
import { useTags } from '@/stores/modules/tagStore'
import { useRouter, useRoute } from 'vue-router'
// import { ref } from 'vue'

// useTags
const { tags, deleteTags } = useTags()
// 鼠标 hover 显示 关闭
// const closable = ref(false)
// const hoverHandle = (data, i) => {
// 	closable.value = data
// 	hoverIndex.value = i
// }
// 鼠标 hover 当前 index
// const hoverIndex = ref(0)

// 发射选中时的 key
const emit = defineEmits(['tagPathClick'])

/**
 * 移除 tag
 * 1 删除的 tag.path 不是当前路由 直接删除
 * 2 是当前路由
 * 如果是最后一个 删除自己 向前一个
 * 不是最后一个   删除自己 向后一个
 * menu 对应 选择  key是数组
 */
const router = useRouter()
const route = useRoute()
const closeHandle = (tag, index) => {
	if (route.path === tag.path) {
		const toTag = tags.length - 1 === index ? tags[index - 1] : tags[index + 1]
		emit('tagPathClick', [toTag.path])
		router.push(toTag.path)
	}
	// pinia 删除
	deleteTags(tag)
}

// 点击跳转
const clickHandle = ({ path }) => {
	emit('tagPathClick', [path])
	router.push(path)
}

// TODO 刷新页面 没有选中 展开
// onMounted emit('tagPathClick', route.path)  SideMenu中  watch -- immediately
</script>
<style scoped lang="less">
.global-tags {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 20px;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	.ant-tag {
		padding: 6px 20px;
		margin-right: 26px;
		background-color: #fff;
		border: 0;
		font-size: 15px;
		border-radius: 0;
		&.active {
			border-bottom: 2px solid #1890ff;
		}
		:deep(.ant-tag-close-icon) {
			font-size: 12px;
			margin-left: 4px;
		}
	}
}
</style>
